<template>
  <div class="feed-page">
    <!-- 顶部信息 -->
    <div class="header-info">
      <div class="info-row">
        <span class="label">任务编码</span>
        <span class="value">NTL202504170001</span>
      </div>
      <div class="info-row">
        <span class="label">投料日期</span>
        <span class="value">2025-04-17 09:15:35</span>
      </div>
      <div class="info-row">
        <span class="label">备注</span>
        <input class="remark-input" v-model="remark" placeholder="" />
      </div>
    </div>
    <div class="divider"></div>

    <!-- 物料卡片列表 -->
    <div class="material-list">
      <div
        v-for="(item, idx) in materials"
        :key="item.name"
        class="material-card"
        :class="item.bgClass"
      >
        <div class="card-header">
          <span class="mat-title">物料名称：{{ item.name }}</span>
          <img v-if="item.checked" src="/static/icons/checked.png" class="checked-icon" />
        </div>
        <div class="card-row">
          <span class="mat-label">配料重量：</span>
          <input
            class="mat-input"
            type="number"
            v-model="item.feedWeight"
            :disabled="item.disabled"
          />
          <span class="mat-unit">公斤</span>
        </div>
        <div class="card-row">
          <span class="mat-label">累计投料：</span>
          <input
            class="mat-input"
            type="number"
            v-model="item.totalWeight"
            :disabled="item.disabled"
          />
          <span class="mat-unit">公斤</span>
        </div>
        <div v-for="(itx, ind) in item.inputWeight" :key="ind">
          <div class="card-row">
            <span class="mat-label">{{ind==0?'投料重量：':''}}</span>
            <input class="mat-input" type="number" v-model="itx.weight" />
            <span class="mat-unit">公斤</span>
          </div>
        </div>
        <button class="read-btn" @click="readWeight(idx)">读取</button>
      </div>
    </div>

    <!-- 底部操作按钮 -->
    <div class="footer-bar">
      <button class="footer-btn uni-btn back" @click="goBack">返回</button>
      <button class="footer-btn uni-btn confirm" @click="confirm">确认</button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const remark = ref('')

const materials = reactive([
  {
    name: '麻泥',
    feedWeight: 0,
    totalWeight: 0,
    inputWeight: [
      {
        id: 1,
        weight: 100
      },
      {
        id: 2,
        weight: 300
      }
    ],
    checked: false,
    bgClass: 'mat-bg-white',
    disabled: false
  },
  {
    name: '石英泥',
    feedWeight: 1000,
    totalWeight: 1050,
    inputWeight: [
      {
        id: 1,
        weight: 300
      },
      {
        id: 2,
        weight: 400
      }
    ],
    checked: true,
    bgClass: 'mat-bg-orange',
    disabled: false
  },
  {
    name: '长丰泥',
    feedWeight: 6100,
    totalWeight: 8500,
    inputWeight: [
      {
        id: 1,
        weight: 100
      }
    ],
    checked: false,
    bgClass: 'mat-bg-red',
    disabled: false
  }
])

function readWeight(idx) {
  // 示例：点击读取后，打勾
  materials[idx].checked = true
  // 其他取消打勾
  materials.forEach((mat, i) => {
    if (i !== idx) {
      mat.checked = false
    }
  })
}

function goBack() {}

function confirm() {}
</script>

<style scoped>
.feed-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
}
.header-info {
  padding: 16px 16px 0 16px;
  font-size: 15px;
  color: #bdbdbd;
}
.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.label {
  min-width: 70px;
}
.value {
  color: #7e9db9;
  font-weight: 500;
  margin-left: 4px;
}
.remark-input {
  flex: 1;
  margin-left: 4px;
  border: none;
  border-radius: 4px;
  background: #f5f5f5;
  padding: 4px 8px;
  color: #666;
}
.divider {
  border-bottom: 2px dashed #d8d8d8;
  margin: 10px 0 0 0;
}
.material-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 8px 8px;
}
.material-card {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin-top: 12px;
  padding: 10px 10px 10px 10px;
  position: relative;
}
.mat-bg-white {
  background: #fff;
}
.mat-bg-orange {
  background: #f8d6a0;
}
.mat-bg-red {
  background: #e9a6a6;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 6px;
}
.checked-icon {
  width: 30px;
  height: 30px;
  margin-left: 8px;
}
.card-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.mat-label {
  min-width: 80px;
  color: #7e5c2f;
  font-size: 14px;
}
.mat-input {
  width: 90px;
  border: 1px solid #bdbdbd;
  border-radius: 3px;
  padding: 2px 6px;
  margin: 0 4px;
  color: #666;
  background: #f5f5f5;
}
.mat-unit {
  color: #7e5c2f;
  font-size: 14px;
  margin-right: 8px;
}
.read-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: #00aaff;
  color: #fff;
  border: none;
  border-radius: 6px;
  /* padding: 6px 18px; */
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.footer-bar {
  display: flex;
  height: 160rpx;
  justify-content: space-around;
  align-items: center;
  /* padding: 12px 8px 12px 8px; */
  background: #fff;
  border-top: 1px solid #e0e0e0;
}
.footer-btn {
  flex: 1;
  margin: 0 8px;
  /* padding: 12px 0; */
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  color: #fff;
  background: #00aaff;
  cursor: pointer;
}
.footer-btn.back {
  background: #4a90e2;
}
.footer-btn.confirm {
  background: #00aaff;
}
</style> 